import React, { useCallback, useEffect, useRef, useState } from "react";
import { List, Button, Modal, InputItem, Toast, Radio, WhiteSpace } from "antd-mobile";

import _http from '@/_http'
import EditFood from './EditModal'

import "./style.css";

const Item = List.Item;
const alert = Modal.alert;

const Food = () => {
  const [foods, setFoods] = useState([]);
  const [cates, setCates] = useState([]);
  const [visible, setvisible] = useState(false)
  const [editId, seteditId] = useState('')
  const [rowData, setrowData] = useState({})
  const [store, setStore] = useState('1')

  const formRef = useRef(null)


  useEffect(async () => {
    await getData();
  }, [store]);

  const getData = useCallback(async () => {
    const res = await _http('/food/getlistwithcate?store=' + store)
    console.log(res, 'res');

    setFoods(res.data.foods);
    setCates(res.data.cates);
  }, [store]);

  const deleteItem = useCallback(async (id) => {
    // prompt();
    console.log(id);
    const res = await _http('/food/del', { id }, 'post')
    if (res.data.code === 1) {
      Toast.success('删除成功！')
    } else {
      Toast.fail(res.data.msg)
    }
    getData()
  }, []);

  const editShow = useCallback((row) => {
    seteditId(row.id)
    setrowData({
      name: row.name,
      price: row.price,
      catid: Number(row.catid),
      img: row.img
    })

    console.log(row);
    setvisible(true);
  }, []);

  const addShow = useCallback(() => {
    console.log('addShow');
    setvisible(true)

  }, [])

  const onOk = useCallback(() => {
    setvisible(false)
    seteditId('')
    // getData()
  }, [])

  return (
    <div>
      <select value={store} onChange={(e) => { console.log(e.currentTarget.value, 'e.currentTarget.value'); setStore(e.target.value); }}>
        <option value="1">味好佳</option>
        <option value="2">左记</option>
      </select>

      {foods.map((item) => (
        <List renderHeader={() => item.name} key={item.catid}>
          {item.list
            ? item.list.map((food) => (
              <Item key={food.id}>
                <div className="food-item">
                  <div className="f-left">
                    <img src={food.img} alt={food.id} />
                  </div>
                  <div className="f-center">
                    <div className="f-name">{food.name}</div>
                    <div className="f-price">￥{food.price}</div>
                  </div>
                  <div className="f-right">
                    <Button
                      onClick={() =>
                        alert("提示", "确认删除该食物吗?", [
                          {
                            text: "取消",
                            onPress: () => console.log("cancel"),
                          },
                          {
                            text: "删除",
                            onPress: async () => {
                              await deleteItem(food.id)
                              // console.log();
                            },
                          },
                        ])
                      }
                      size="small"
                    >
                      删除
                      </Button>
                    <Button
                      size="small"
                      style={{ marginTop: "3px" }}
                      onClick={() => editShow(food)}
                    >
                      编辑
                      </Button>
                  </div>
                </div>
              </Item>
            ))
            : null}
        </List>
      ))}

      <div style={{ position: 'fixed', bottom: '10px', right: '10px' }}>
        <img src={require('@/icons/add.png').default} alt="添加" onClick={() => addShow()} />
        <img src={require('@/icons/refresh.png').default} alt="刷新" onClick={() => getData()} />
      </div>
      <style>{`
      .am-modal-mask {
        background-color: rgba(0, 0, 0, 0.3);
      }`}
      </style>

      <EditFood visible={visible} cates={cates} editId={editId} rowData={rowData} store={store} onOk={onOk} />
    </div>
  );
};

export default Food;
